<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #oCanvas {
            border: 1px solid #000;
        }
    
    </style>
</head>
<body>
    <canvas id="oCanvas" width="500" height="400"></canvas>
    <script type="notjs" id="vertex">
         /*
          顶点着色器 
         */
        attribute vec4 a_position;
        // uniform vec4 u_transform;
        // uniform float cosB, sinB;

        // uniform mat4 matrix;
        attribute float a_pointsize;
        void main() {
            gl_Position = a_position;
            gl_PointSize = a_pointsize;
            // gl_Position = a_position + u_transform;
            // gl_Position.x = a_position.x + u_transform.x;
            // gl_Position.y = a_position.y + u_transform.y;
            // gl_Position.z = a_position.z + u_transform.z;
            // gl_Position.w = a_position.w;
           //  gl_Position.x = a_position.x * cosB - a_position.y * sinB;
            // gl_Position.y = a_position.x * sinB + a_position.y * cosB;
            // gl_Position.z = a_position.z;
            // gl_Position.w = a_position.w;
            // gl_Position = matrix * a_position;
        }
    </script>
    <script type="notjs" id="fragment">
        /*
            片元着色器 ： 绘制颜色或者纹理的 —— 水彩的作用
        */
        precision mediump float;
        // varyings vec4 f_color

        void main() {
            gl_FragColor = vec4(0, 0, 0, 1.0);
        }

    </script>
    <script>
        var canvas = document.getElementById('oCanvas');
        var gl = canvas.getContext('webgl');
        if (!gl) {
            console.log('浏览器不兼容webgl');
        }

        var vertex = document.getElementById('vertex').innerText;
        var fragment = document.getElementById('fragment').innerText;

        // 顶点着色器 gl.VERTEX_SHADER   片元着色器 gl.FRAGMENT_SHADER;
        function createShader(gl, type, source) {
            var shader = gl.createShader(type);
            //  添加数据源
            gl.shaderSource(shader, source); 
            gl.compileShader(shader);

            var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (success) {
                return shader;
            }
            console.log(gl.getShaderInfoLog(shader));
        }

        var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertex);
        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragment);

        function createProgram(gl, vertexShader, fragmentShader) {
            var program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            var success = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (success) {
                return program;
            }
            console.log(gl.getProgramInfoLog(program));
        }
        var program = createProgram(gl, vertexShader, fragmentShader);
        gl.useProgram(program);

        // gl.clearColor(0, 0, 0, 0.5);
        gl.clear(gl.COLOR_BUFFER_BIT);
        // 获取a_position 存储位置
        var a_position = gl.getAttribLocation(program, 'a_position');
        // var cosB = gl.getUniformLocation(program, 'cosB');
        // var sinB = gl.getUniformLocation(program, 'sinB');
        // var u_transform = gl.getUniformLocation(program, 'u_transform');
        // var u_matrix = gl.getUniformLocation(program, 'matrix');
        var a_pointsize = gl.getAttribLocation(program, 'a_pointsize');
        var positionBuffer = gl.createBuffer();
        var pointSizeBuffer = gl.createBuffer();
        var deg = 0.0;
       
       rotate();
       function rotate() {
           deg += 1;
           var deg1 = deg * Math.PI / 180.0;
           draw(deg1);
        //    requestAnimationFrame(rotate);
       }
       function draw (deg) {
          
        //    旋转
        // var cosB = Math.cos(deg);
        // var sinB = Math.sin(deg);
        // gl.uniformMatrix4fv(u_matrix, false, new Float32Array([
        //     cosB, sinB, 0, 0, 
        //     -sinB, cosB, 0, 0,
        //     0, 0, 1, 0,
        //     0, 0, 0, 1,
        // ]))
        // 平移
        // var Tx = -0.5, Ty = 0.0, Tz = 0.0;
        // gl.uniformMatrix4fv(u_matrix, false, new Float32Array([
        //     1, 0, 0, 0, 
        //     0, 1, 0, 0,
        //     0, 0, 1, 0,
        //     Tx, Ty, Tz, 1,
        // ]))
        // 缩放
        // var Sx = 0.5, Sy = 1.5, Sz = 1.0;
        // gl.uniformMatrix4fv(u_matrix, false, new Float32Array([
        //     Sx, 0, 0, 0, 
        //     0, Sy, 0, 0,
        //     0, 0, Sz, 0,
        //     0, 0, 0, 1,
        // ]))
        // gl.uniform1f(cosB, Math.cos(deg));
        // gl.uniform1f(sinB, Math.sin(deg));
        // var size = new Float32Array([
        //     10.0, 20.0, 30.0
        // ]);
        var positionArray = new Float32Array([
            0.0, 0, 0, 10.0,
            0, 0.5, 0, 40.0,
            0, 0, 0.5, 30.0,
        ]);
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        // gl.uniform4f(u_transform, 0.0, 0.0, 0.0, 1.0);
        gl.bufferData(gl.ARRAY_BUFFER, positionArray, gl.STATIC_DRAW);
        // size: 分量  （即起作用的量）  stride：每个点所有数据量 包含分量信息和额外点的信息
        // 如果缓冲区中只存在一种数据  如顶点坐标  stride 默认值为 0  即无意义  默认就是每位字节长度 * 点的分量数 
        // offset 分量从第几个开始计算 
        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, true, 4 * 4, 4 * 1);
        gl.enableVertexAttribArray(a_position);
        gl.vertexAttribPointer(a_pointsize, 1, gl.FLOAT, false, 4 * 4, 4 * 3);
        gl.enableVertexAttribArray(a_pointsize);
        gl.drawArrays(gl.POINTS, 0, 3);
       }

    </script>
</body>
</html>
